import { CITYS, ObjectType } from "esy-tools"
import { Form, useForm, Input, Select, Switch, Checkbox, Radio, DateSelect, Picker } from "esy-ui"
import React, { useState } from "react"

const options = [
    {
        value: "A",
        key: 1,
        text: "A"
    },
    {
        value: "B",
        key: 2,
        text: "B"
    }
]

export const Demo = ({ disabled, readOnly, isRules, isVC }: ObjectType) => {
    const [form] = useForm()
    const [size, setSize] = useState("mini")

    const onValuesChange = (obj: ObjectType) => {
        if (isVC) {
            console.warn({ obj })
        }
    }

    // 校验
    const rules = isRules
        ? [
              {
                  validator: (_: unknown, value: number) => {
                      if (!value || value <= 0) {
                          return new Error("余额需大于0！")
                      }
                      return Promise.resolve()
                  }
              }
          ]
        : []

    return (
        <Form form={form} colon size={size} disabled={disabled} readOnly={readOnly} onValuesChange={onValuesChange}>
            <div className="flex items-center mb-6">
                <Radio
                    label="large"
                    value="large"
                    checked={size === "large"}
                    onClick={() => {
                        setSize("large")
                    }}
                />
                <Radio
                    label="normal"
                    value="normal"
                    checked={size === "normal"}
                    onClick={() => {
                        setSize("normal")
                    }}
                />
                <Radio
                    label="small"
                    value="small"
                    checked={size === "small"}
                    onClick={() => {
                        setSize("small")
                    }}
                />
                <Radio
                    label="mini"
                    value="mini"
                    checked={size === "mini"}
                    onClick={() => {
                        setSize("mini")
                    }}
                />
            </div>
            <Form.Item formlabel="switch" name="switch">
                <Switch />
            </Form.Item>
            <Form.Item formlabel="input" rules={rules} name="input">
                <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item formlabel="select" name="select">
                <Select placeholder="请选择" options={options} />
            </Form.Item>
            <Form.Item formlabel="checkbox" name="checkbox">
                <Checkbox />
            </Form.Item>
            <Form.Item formlabel="radio" name="radio">
                <Radio />
            </Form.Item>
            <Form.Item formlabel="date-select" name="date-select">
                <DateSelect />
            </Form.Item>
            <div className="block md:hidden">
                <Form.Item formlabel="picker" name="date-select">
                    <Picker placeholder="请选择省份地址(仅 h5 可用)" options={CITYS} cascade />
                </Form.Item>
            </div>
        </Form>
    )
}

const ruleStr = `
    const rules = [
        {
          validator: (_: any, value: number) => {
            if (!value || value <= 0) {
              return new Error('余额需大于0！');
            }
            return Promise.resolve();
          },
        },
    ];
`

export const demoJson = (str = "", isVC = false, isRules = false) => `
import { Form, useForm, Input, Select, Switch, Checkbox, Radio, DateSelect } from "esy-ui"
import React from "react"

const options = [
    {
        value: 'A',
        text: 'A'
    },
    {
        value: 'B',
        text: 'B'
    },
]

export const Demo = () => {
    const [form] = useForm()

${isVC ? "const onValuesChange = (obj) => { console.warn({ obj }) };" : ""}

${isRules ? ruleStr : ""}

    return (
        <Form form={form} ${str}>
            <Form.Item>
                <Switch />
            </Form.Item>
            <Form.Item>
                <Input ${isRules ? "rules={rules}" : ""} placeholder="请输入" />
            </Form.Item>
            <Form.Item>
                <Select placeholder="请选择" options={options} />
            </Form.Item>
            <Form.Item>
                <Checkbox />
            </Form.Item>
            <Form.Item>
                <Radio />
            </Form.Item>
            <Form.Item>
                <DateSelect />
            </Form.Item>
        </Form>
    )
}
`
